<script lang="tsx">
import {
  defineComponent,
  ref,
  computed,
  type PropType,
  type ExtractPropTypes
} from 'vue'
import { ElTooltip, ElText } from 'element-plus'
import { merge } from 'lodash-es'
import {
  omitSelfProps,
  makeValue,
  IgnoreProps,
  type BaseType,
  type SimpleKeyValueObject,
  type SimpleKeyArrayObject
} from './utils'
export const oTextSelfProps = {
  formData: {
    type: Object,
    required: true
  },
  prop: {
    type: String
  },
  perm: {
    type: String,
    default: 'true'
  },
  visiable: {
    type: Boolean,
    default: true
  },
  showTooltip: {
    type: Boolean,
    default: false
  },
  ...IgnoreProps
}
export const oTextProps = {
  ...ElText.props,
  ...oTextSelfProps
}
export type oTextPropsType = ExtractPropTypes<typeof oTextProps>
const oText = defineComponent({
  name: 'one-text',
  props: oTextProps,
  // inheritAttrs: false,
  components: { ElText, ElTooltip },
  setup(props: oTextPropsType, context) {
    const inProps = omitSelfProps<oTextPropsType, typeof oTextSelfProps>(
      props,
      oTextSelfProps
    )
    const content = props.value || props.formData![props.prop!]
    const jsx = props.showTooltip ? (
      <ElTooltip content={content}>{content}</ElTooltip>
    ) : (
      content
    )
    return () => (
      <ElText {...inProps} type="" class={oText.name} v-slots={context.slots}>
        {jsx}
      </ElText>
    )
  }
})
export default oText
</script>
<style lang="scss" scoped>
.one-text {
  overflow: hidden;
  text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
  display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-line-clamp: 2; /* 文本需要显示多少行 */
}
</style>
